<template>
  <div class="films-page">
    <van-tabs>
      <van-tab title="正在热映">
        <FancyList :request="onRequest">
          <template #default="scope">
            <FilmItem :data="scope" />
          </template>
        </FancyList>
      </van-tab>
      <van-tab title="即将上映">
        <FancyList :request="onRequest1">
          <template #default="scope">
            <FilmItem :data="scope" />
          </template>
        </FancyList>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts" setup>
import FancyList, { type IParams } from '@/components/fancy-list/index.vue'
import FilmItem from './components/film-item.vue'
import { getFilmList } from '@/api/modules/film'
import { useStore } from '@/hooks'

const { cityStore } = useStore()

const onRequest = async (params: IParams) => {
  const result = await getFilmList({
    type: 1, // 电影类型 1 - 正在热映 2 - 即将上映
    cityId: cityStore.curCityId,
    pageNum: params.pageNum,
    pageSize: params.pageSize
  })

  return {
    list: result.films,
    total: result.total
  }
}

const onRequest1 = async (params: IParams) => {
  const result = await getFilmList({
    type: 2, // 电影类型 1 - 正在热映 2 - 即将上映
    cityId: cityStore.curCityId,
    pageNum: params.pageNum,
    pageSize: params.pageSize
  })

  return {
    list: result.films,
    total: result.total
  }
}
</script>

<style lang="scss" scoped>
.films-page {
  height: 100%;
  overflow: hidden;
}

.van-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

:deep(.van-tabs__content) {
  flex: 1;
  overflow: hidden;
}

:deep(.van-tab__panel) {
  height: 100%;
  overflow: hidden;
}
</style>
